<template>
    <div class="content">
        <div class="box">
            <div class="left">
                <img src="../../assets/images/error_images/404.png" alt="">
            </div>
            <div class="right">
                <h2>OOPS!</h2>
                <p>版权归 <span>XXXXXXX</span> 所有</p>
                <h3>管理员说你不能进入到这个页面!!!</h3>
                <p>请你检查输入的网址是否正确，<br /> 或者点击下面按钮返回首页。</p>
                <el-button type="primary" @click="goHome">首页</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const $router = useRouter()

const goHome = () => {
    $router.replace('/')
}

</script>

<style scoped lang="scss">
.content {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .box {
        display: flex;
        align-items: center;

        .left {
            img {
                width: 800px;
                height: 400px;
            }
        }

        .right {
            h2 {
                font-size: 40px;
                font-weight: 600;
                color: #1482f0;
            }

            p {
                font-size: 20px;
                margin: 15px 0;
                color: #979797;

                span {
                    color: #1482f0;
                }
            }

            h3 {
                font-size: 25px;
                font-weight: 600;
                color: #000;
            }
        }
    }
}
</style>
